<template>
	<u-navbar title="公告详情" :autoBack="true"
		titleStyle="color:#d1f5f8;margin-left:-65%;margin-top:-0.5%;font-size:30rpx;" leftIconSize="30rpx"
		leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<view class="main">
		<view class="title">{{noticeStore.noticeDetail.title}}</view>
		<view class="content">
			<view class="text">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{noticeStore.noticeDetail.content}}</view>
			<view class="img">
				<up-image :show-loading="true" :src="noticeStore.noticeDetail.imgSrc" width="700rpx" height="500rpx"
					bgColor="#00daf5" style="margin-top: 50rpx;"></up-image>
			</view>
			<view class="time">{{noticeStore.noticeDetail.time}}</view>
		</view>
	</view>
</template>

<script>
	import {
		useNoticeStore
	} from "@/stores/noticeStore.js"
	export default {
		setup() {
			const noticeStore = useNoticeStore();
			async function getNoticeDetail(noticeId) {
				await noticeStore.toGetNoticeDetail(noticeId);
			}
			return {
				noticeStore,
				getNoticeDetail
			}
		},
		onLoad(e) {
			this.getNoticeDetail(e.noticeId)
		}
	}
</script>

<style lang="scss">
	body {
		background-image: url('/static/images/notice_background.webp');
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
		background-attachment: fixed;


		.main {
			width: 96%;
			margin: 20rpx auto;

			border: 5rpx solid #59863a;
			border-radius: 20rpx;

			.title {
				font-weight: 700;
				text-align: center;
				height: 60rpx;
				margin-top: 20rpx;
				font-size: 42rpx;

			}

			.content {
				margin-top: 30rpx;

				padding: 10rpx;
				font-size: 30rpx;
				font-family: sans-serif;

				.text {
					font-weight: 700;
					padding: 20rpx;
					line-height: 50rpx;
				}

				.img {
					display: flex;
					flex-direction: column;
					align-items: center;

				}

				.time {
					margin-left: 350rpx;
					margin-top: 20rpx;
					color: #fff;
					font-weight: 700;
				}
			}
		}
	}
</style>